<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-1 JS语法基础</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <h1>1-1 JS语法基础</h1>
    <h3>js文件引入</h3>
    <p>我们把 JavaScript 放到了页面代码的底部，这样就可以确保在元素创建之后再执行脚本。</p>

    <h3>js输出</h3>
    <p>如果在文档加载完后执行document.write(),则整个html页面将被覆盖。<button class="btn btn-danger btn-sm" onclick="testWrite()">点击测试</button></p>


    <h3>关于语法</h3>
    <p>在 JavaScript 中，用分号来结束语句是可选的</p>
    <p>JavaScript 对大小写敏感。</p>
    <p>可以在<strong>文本字符串中</strong>使用反斜杠对代码行进行换行</p>
    <p>变量名可以以字母、$和_开头，但后两者不推荐。</p>
    <p>变量声明但未定义时值是undefined，重复声明后值不会丢</p>
    <p>JavaScript 变量的生存期：
        JavaScript 变量的生命期从它们被声明的时间开始；
        局部变量会在函数运行以后被删除；
        全局变量会在页面关闭后被删除。
    </p>
    <p>可以通过将变量的值设置为 null 来清空变量。</p>

    <h3>创建数组并赋值的3种方法</h3>
    <ol>
        <li>
            <p>
                <code>var computers = new Array()</code><strong>这里的小括号可要可不要？</strong>
                <br><code>computers[0] = “IBM”</code>
                <br><code>computers[1] = “sony”</code>
                <br><code>computers[2] = “Haier”</code>
            </p>
        </li>
        <li>
            <p><code>var computers =new Array(“IBM”,"sony","Haier")</code></p>
        </li>
        <li>
            <p><code>var computers =[“IBM”,"sony","Haier"]</code></p>
        </li>
    </ol>


    <h3>JS语句</h3>
    <p>switch语句举例如下：
        <button class="btn btn-primary btn-sm" onclick="testSwitch()">测试switch语句</button>
        <pre><!--下面代码请勿格式化-->
            var day = new Date().getDay();
            var str = "";
            switch (day){
                case 0:
                    str="星期日，可惜明天就要上班了~~~~(>_<)~~~~ ";
                    break;
                case 6:
                    str = "星期六，周末愉快O(∩_∩)O~";
                    break;
                default:
                    str = "不是周末，你一定在苦逼的加班中。。。"
            }
            alert("今天"+str);
        </pre>
    <p>for in循环举例如下：
        <button class="btn btn-primary btn-sm" onclick="testForIn()">测试forIn语句</button>
        <pre>
            var person = {
                    name:"爱因斯坦",
                    age:200,
                    work:"相对论"
                };
                var txt = "";
                for (var x in person){
                    txt += person[x]+"，";
                }
                alert(txt);
        </pre>
    <p>break跳出一层循环，continue调过本次循环进行下一次迭代</p>
    <p>
        continue 语句（带有或不带标签引用）只能用在循环中，
        break 语句（不带标签引用），只能用在循环或 switch 中；
        通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。
        <br>break举例如下：
        <button class="btn btn-primary btn-sm" onclick="testBreak()">测试break语句</button>
        <pre>
            var result = "";
        outLoop:
            for (var i = 0; i < 10; i++) {
                inLoop:
                    for (var j = 0; j < 10; j++) {
                        if (j >= 3) {
                            break;
                        }
                        if (i === 2) {
                            break inLoop;//这里跳出一层可以不加标签
                        }
                        if (i === 4) {
                            break outLoop;
                        }
                        result += "i=" + i + ", j=" + j + "<br>"
                    }
            }
        $(".result").html(result)
    </pre>
        <div class="result"></div>

    <h3>关于异常</h3>
    <p>通过<code>try{}</code><code>catch(err){}</code>来捕获，举例如下：
        <button class="btn btn-primary btn-sm" onclick="testTryCatch()">测试tryCatch</button>
        <pre>
            try{
                allert("测试代码")
            }catch (err){
                alert("发生错误了，信息是：\n"+err.message+"，\n点击请继续！")
            }

</pre>
    </p>
    <p>通过<code>throw</code>自定义异常，举例如下：
        <button class="btn btn-primary btn-sm form-inline" onclick="testThrow()">测试throw</button>
        <div class="form-group form-inline">
            <label for="testThrow">请输入内容：</label>
            <input id="testThrow" class="form-control" placeholder="请输入考试成绩">
        </div>

    <pre>
            try{
                var x = $("#testThrow").val();
                if (x === "") throw "输入为空";
                if(isNaN(x)) throw "输入的不是数字";
                if(x<0 ||  x>100) throw "请输入0~100之间的分数";
            }catch (err){
                alert(err+"!")
            }

    </pre>
    </p>
</div>

<script src="js/jquery-2.2.4.js"></script>
<script src="js/main.js"></script>
<script>
    function testWrite() {
        document.write("<p>糟糕！文档消失了！</p>")
    }
    function testSwitch() {
        var day = new Date().getDay();
        var str = "";
        switch (day){
            case 0:
                str="星期日，可惜明天就要上班了~~~~(>_<)~~~~ ";
                break;
            case 6:
                str = "星期六，周末愉快O(∩_∩)O~";
                break;
            default:
                str = "不是周末，你一定在苦逼的加班中。。。"
        }
        alert("今天"+str);
    }
    function testForIn() {
        var person = {
            name:"爱因斯坦",
            age:200,
            work:"相对论"
        };
        var txt = "";
        for (var x in person){
            txt += person[x]+"，";
        }
        alert(txt);
    }
    function testBreak() {
        var result = "";
        outLoop:
            for (var i = 0; i < 10; i++) {
                inLoop:
                    for (var j = 0; j < 10; j++) {
                        if (j >= 3) {
                            break;
                        }
                        if (i === 2) {
                            break inLoop;//这里跳出一层可以不加标签
                        }
                        if (i === 4) {
                            break outLoop;
                        }
                        result += "i=" + i + ", j=" + j + "<br>"
                    }
            }
        $(".result").html(result)
    }
    function testTryCatch() {
        try{
            allert("测试代码")
        }catch (err){
            alert("发生错误了，信息是：\n"+err.message+"，\n点击请继续！")
        }
    }
    function testThrow() {
        try{
            var x = $("#testThrow").val();
            if (x === "") throw "输入为空";
            if(isNaN(x)) throw "输入的不是数字";
            if(x<0 ||  x>100) throw "请输入0~100之间的分数";
        }catch (err){
            alert(err+"!")
        }
    }
    $(function () {

    })

</script>
</body>
</html>
